<template>
  <div class="echartsBox">
    <div v-if="leftBottomData.length" id="eqRunLeftLine" class="allWidthHeight" />
    <div v-else class="kong">暂无数据</div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      myChart: null,
      value1: '',
      leftBottomData: []
    }
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
    },
    /* 获取设备累计运行时间 */
    async getEquipRunStat() {
      const res = await this.$axios.get('/board/internetData/equipRunStat')
      if (res?.data.code === 200) {
        this.leftBottomData = res.data.data
        setTimeout(async () => {
          this.setEqRunLeftLine(res.data.data)
        }, 500)
      }
    },
    /* 设备累计运行时间echarts */
    setEqRunLeftLine(data) {
      let time = []
      let num = []
      data.forEach((item) => {
        time.push(item.monthDate.slice(2, 10))
        num.push(item.totalTime)
      })
      const option = {
        grid: {
          left: '10%', // 距离左侧的距离
          right: '2%', // 距离右侧的距离
          top: '25%', // 距离顶部的距离
          bottom: '15%' // 距离底部的距离
        },
        legend: {
          data: ['时间'],
          right: 0,
          top: 0,
          // width: '100px',
          textStyle: {
            fontSize: '14px',
            color: '#fff' // 这里设置图例的字体颜色为红色
          },
          itemWidth: 10, // 设置图例标记的图形宽度
          itemHeight: 10 // 设置图例标记的图形高度
        },
        xAxis: [
          {
            splitLine: { show: false },
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              // 坐标轴 轴线
              lineStyle: {
                color: '#fff',
                width: 1,
                type: 'solid'
              }
            },
            axisLabel: {
              color: '#fff',
              formatter: '{value}月',
              interval: 0 // 代表显示所有x轴标签显示
            },
            type: 'category',
            data: time
          }
        ],
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              show: true,
              // 坐标轴 轴线
              lineStyle: {
                color: '#fff',
                width: 1,
                type: 'solid'
              }
            },
            axisLabel: {
              color: '#fff'
            },
            axisTick: {
              show: true
            },
            type: 'value'
          }
        ],
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            name: '时间',
            type: 'bar',
            data: num,
            itemStyle: {
              // color: '#3FA1F5'
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#00d386' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#0076fc' // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              },
              borderRadius: 10
            },

            label: {
              show: true, // 显示数值
              position: 'top', // 在顶部显示
              color: '#fff'
            }
          }
        ]
      }
      if (
        this.myChart != null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose() // 销毁
      }
      this.myChart = echarts.init(document.getElementById('eqRunLeftLine'))
      this.myChart.clear()
      this.myChart.setOption(option, true)
    }
  }
}
</script>
<style lang='scss' scoped>
.echartsBox {
  width: 100%;
  padding: 0 15px;
  height: calc(100% - 65px);
}
.kong {
  background-size: 50% auto;
}
</style>
